<template>
  <div>
    <!-- 搜索 -->
    <search-bar @onSearch="onSearch" />
    <!-- /搜索 -->
    <el-button type="primary" @click="showAddDialog">新增商品分类</el-button>
    <el-table row-key="id" :data="cates" style="width: 100%">
      <el-table-column prop="cateName" label="分类名" />
      <el-table-column prop="cateIcon" label="图标" width="180">
        <template #default="{ row }">
          <img :src="row.cateIcon" width="80" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="是否显示">
        <template #default="{ row }">
          <el-switch
            inline-prompt
            v-model="row.enable"
            active-text="显示"
            inactive-text="隐藏"
            @change="changeCateEnable(row.id, row.enable)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="showUpadateDialog(row.id)">编辑</el-button>
          <el-button type="danger" @click="delCate(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增商品分类弹窗 -->
    <el-dialog v-model="cateAddShow" title="新增商品分类" width="40%">
      <cate-add :cates="cates" />
    </el-dialog>
    <!-- / 新增商品分类弹窗-->
    <!-- 修改商品分类弹窗 -->
    <el-dialog v-model="cateUpdateShow" title="修改商品分类" width="40%">
      <cate-update :cates="cates" :cateId="updateCateId" />
    </el-dialog>
    <!-- / 修改商品分类弹窗-->
  </div>
</template>

<script>
import { fetchCateLists, updateCate, delCate } from "@/api/cate";
import SearchBar from "@/components/SearchBar.vue";
import CateAdd from "./components/CateAdd.vue";
import CateUpdate from "./components/CateUpdate.vue";
export default {
  name: "CateLists",
  data() {
    return {
      // 商品列表数据
      cates: [],
      // 搜索参数
      searchParams: {},
      cateAddShow: false,
      cateUpdateShow: false,
      updateCateId: -1,
    };
  },
  methods: {
    // 删除商品分类
    delCate(id) {
      // 弹出确认框 确认后删除
      this.$confirm("此操作会彻底删除分类,继续吗?", "删除分类").then(() => {
        delCate(id).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000,
              onClose: () => {
                this.fetchCates();
              },
            });
          }
        });
      });
    },
    changeCateEnable(cateId, enable) {
      // 行内修改商品分类的显示和隐藏状态
      updateCate({
        id: cateId,
        enable,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000,
            onClose: () => {
              // 除了刷新 也可以重新请求列表数据
              this.fetchCates();
            },
          });
        }
      });
    },
    // 点击编辑 显示 修改商品分类
    showUpadateDialog(id) {
      this.cateUpdateShow = true;
      this.updateCateId = id;
    },
    // 点击新增商品分类 显示新增商品分类弹窗
    showAddDialog() {
      this.cateAddShow = true;
    },
    onSearch(searchParams) {
      // 点击请求
      this.searchParams = searchParams;
      this.fetchCates();
    },
    // 请求商品列表
    fetchCates() {
      fetchCateLists({
        ...this.searchParams,
      }).then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data;
        }
      });
    },
  },
  created() {
    this.fetchCates();
  },
  components: {
    SearchBar,
    CateAdd,
    CateUpdate,
  },
};
</script>

<style lang="scss" scoped></style>
